<!--
 * @Description: dashboard 头部内容
 * @Author: wangqi
 * @Date: 2022-05-29 10:02:56
 * @LastEditTime: 2022-05-29 11:30:02
-->
<template>
  <div class="headerContent lg:flex p-4">
    <a-avatar :src="headerImg" :size="72" class="!block !m-auto" />

    <div class="md:ml-6 mt-2 flex flex-col justify-center">
      <h1>早安, 大西瓜, 开始您一天的工作吧！</h1>
      <span class="text-secondary">今日晴，21℃ - 32℃！</span>
    </div>

    <div class="flex flex-1 flex-row justify-end mt-4">
      <div class="flex flex-col justify-center text-right">
        <span class="text-secondary">待办</span>
        <span class="text-2xl">2/10</span>
      </div>
      <div class="flex flex-col justify-center text-right mx-12">
        <span class="text-secondary">项目</span>
        <span class="text-2xl">8</span>
      </div>
      <div class="flex flex-col justify-center text-right mx-12">
        <span class="text-secondary">团队</span>
        <span class="text-2xl">300</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import headerImg from '@/assets/images/header.jpg';

  defineOptions({
    name: 'HeaderContent',
  });
</script>

<style lang="less" scoped>
  .headerContent {
    background: #fff;
    border-top: 1px solid #e0e0e0;
  }
</style>
